<template>
<div class="wrap">
    <!-- 搜索页面 -->
    <view class="searchwrap" >
        <!-- 搜索框及取消按钮 -->
        <view class="top">
            <van-search v-model="value" shape="round" autofocus class="input" @input="changeHandler" @search="confirmHanlder"/>
            <text class="cancel" @click="cancelHandler">取消</text>
        </view>

        <!-- 搜索历史 -->
        <div class="history" v-if="historyList?.length&&!value">
            <div class="histop">
                <div class="histitle">搜索历史</div>
                <el-icon class="delicon" @click="deleteHandler"><Delete /></el-icon>   
            </div>
            <div class="hisitembox">
                <div class="hisitem" v-for="(item,index) in historyList" :key="index"  @click="toSearchList(item)">{{item}}</div>
            </div>
        </div>

        <!-- 热门/有声书搜索导航 -->
        <div class="scrollwrap" v-if="!value">
            <!-- 滚动导航 -->
            <div class="scrollview">
                <div class="navblock">
                    <div class="navwrap">
                        <div :class="['item',flag===index&&'active']" v-for="(item,index) in categoryList" :key="item.categoryId" @click="navClickHandler(index,item.categoryId)">
                            <text>{{item.categoryName}}</text>
                            <p class="redline" v-show="flag===index"></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行 -->
            <div class="rankwrap">
                <div class="rankitem" v-for="(item,index) in hotWordResultList" :key="index" @click="toSearchList(item.word)">
                    <div class="itemleft">{{index+1}}</div>
                    <div class="itemright">{{item.word}}</div>
                    <div :class="['iconfont', item.shift>0?'icon-arrow-up':(item.shift===0? 'icon-minus1' :'icon-arrow-down1')]"></div>
                </div>
            </div>


        </div>

        <!-- 动态搜索 -->
        <div class="activesearch" v-if="value&&(albumResultList.length||queryResultList.length)">
            <div class="top" v-for="item in albumResultList" :key="item.id" @click="toSearchList(item.keyword)">
                <img class="searchimg" :src="item.imgPath" alt="">
                <div class="content">
                    <div class="title">{{ item.keyword }}</div>
                    <div class="contentbottom">
                        <div class="desc">{{ item.category }}</div>
                        <div class="play">
                            <van-icon name="audio" class="audio"/>
                            <span class="playnum">{{ simplifyNum(item.play) }}</span>
                        </div>
                        <div class="num">
                            <div class="iconfont icon-sound-wave"></div>
                            <span class="no">{{ item.tracks }}集</span>
                        </div>
                    </div>
                </div>
                <div class="iconfont icon-icon-video-play-fill"></div>
            </div>
            <div class="bottom">
                <div class="item" v-for="(item,index) in queryResultList" :key="index" @click="toSearchList(item.keyword)">{{ item.keyword }}</div>
            </div>
        </div>
        <div class="empty">
            <van-empty description="暂无内容" v-if="value&&(!albumResultList.length&&!queryResultList.length)"/>
        </div>

    </view>

</div>

</template>
<script lang="ts">
  import {defineComponent} from 'vue'


  export default defineComponent({
    name:'Search',

  })

</script>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Delete } from '@element-plus/icons-vue';
import {reqCategoryList,
    type categoryArr,
    reqRankList,
    type rankArr,reqSearchActive, 
    type albumResultListModel, 
    type queryResultModel,
} from '../../api/search'
import { watch } from 'vue';
import { useRouter } from 'vue-router'

// 单位转换
function simplifyNum(number: number) {
  let str_num = 0;
  if (number >= 1e4 && number < 1e8) {
    str_num = number / 1e4;
    return str_num.toFixed(2) + "万";
  } else if (number >= 1e8 && number < 1e10) {
    str_num = number / 1e8;
    return str_num.toFixed(2) + "亿";
  } else {
    //一千以下
    return number;
  }
}




const emits = defineEmits<{
    (e:'update:modelValue',isShow:boolean):void
}>()


const router = useRouter()


const value = ref('')
const flag = ref(0)
const categoryId = ref()

const navClickHandler = (index:number,id:string) => {
    flag.value = index
    categoryId.value = Number(id)
    getRankList()
}   
onMounted(() => {
    getCategoryList()
})
const categoryList = ref<categoryArr[]>([])
const getCategoryList = async () => {
    let res = await reqCategoryList()
    categoryList.value = res.category
    categoryId.value = res.category[0].categoryId
    getRankList()

}


// 获取分类下的列表

const size = ref(20)
const hotWordResultList = ref<rankArr[]>([])
const getRankList = async () => {
    let res = await reqRankList(categoryId.value,size.value)
    hotWordResultList.value = res.hotWordResultList
}



// 点击取消
const cancelHandler = () => {
    value.value = ""
    emits('update:modelValue',false)
}




// 动态搜索
const albumResultList = ref<albumResultListModel[]>([])
const queryResultList = ref<queryResultModel[]>([])
const changeHandler = async () => {
    let res = await reqSearchActive(value.value)
    albumResultList.value = res.data.result.albumResultList
    queryResultList.value = res.data.result.queryResultList
}


// 搜索confirm事件
const confirmHanlder = () => {
    if (historyList.value?.includes(value.value)) {
        const index = historyList.value?.indexOf(value.value)
        historyList.value?.splice(index,1)
    }
    historyList.value?.unshift(value.value)
    historyList.value = historyList.value?.slice(0,6)
    // 跳路由 带kw
    router.push(`/so/${value.value}`)
    emits('update:modelValue',false)
    value.value = ""
}




// 删除搜索历史
const deleteHandler = () => {
    historyList.value = []
}



// 搜索历史
const historyList = ref<string[]>(JSON.parse(localStorage.getItem('searchlist')!) || [])
// const historyList = ref<string[]>([])
watch(historyList,(nval) => {
    // console.log('watch historyList',historyList);
    // console.log('watch nval',nval);
    localStorage.setItem('searchlist',JSON.stringify(nval))
},{deep:true})


// 去搜索列表
const toSearchList = async (keyword:string) => {
    // console.log('tosearch  keyword',keyword);
    // console.log('tosearch  historyList',historyList.value);
    if (historyList.value?.includes(keyword)) {
        const index = historyList.value?.indexOf(keyword)
        historyList.value?.splice(index,1)
    }
    historyList.value?.unshift(keyword)
    historyList.value = historyList.value?.slice(0,6)
    // 跳路由 去搜索列表发请求
    router.push(`/so/${keyword}`)
    // router.push({
    //     name:'so',
    //     params:{
    //         keyword:keyword
    //     }
    // })
    value.value=""
    emits('update:modelValue',false)
    
}



</script>

<style scoped lang="scss">
.wrap {
    p {
        width: 200px;
        height: 20px;
        border: 1px solid #ddd;
    }

    
    .searchwrap {
        width: 375px;
        position: absolute;
        top: 0;
        left: 0;
        .top {
            display: flex;
            align-items: center;
            .input {
                width: 320px;
            }
            .cancel {
                font-size: 16px;
                padding-left: 6px;
                padding-right: 14px;
            }
        }
        .history {
            padding: 0 14px;
            margin-top: 6px;
            .histop {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 4px;
                .histitle {
                    font-size: 14px;
                    color: #333;
                }
                .delicon {
                    font-size: 14px;
                }
            }
            .hisitembox {
                // display: flex;
                .hisitem {
                    display: inline-block;
                    margin: 5px 10px 10px 0;
                    padding: 5px 15px;
                    max-width: 100%;
                    line-height: 30px;
                    background: #f3f4f5;
                    border-radius: 4px;
                    box-sizing: border-box;
                    color: #333;
                    font-size: 14px;
                }
            }
        }
        .scrollwrap {
            padding-bottom: 18px;
            .scrollview {
                overflow: hidden;
                
                .navblock {
                    overflow-x: scroll;
                    border-bottom: 1px solid #eee;
                    &::-webkit-scrollbar {
                        display: none;
                    }

                    .navwrap {
                        display: flex;
                        align-items: center;
                        font-family: PingFangSC-Regular;
                        font-size: 14px;
                        color: #a3a3ac;
                        .item {
                            white-space: nowrap;
                            padding: 8px 13px;
                            position: relative;
                            display: flex;
                            align-items: center;
                            flex-direction: column;
                            &.active {
                                font-size: 18px;
                                color: #40404c;
                                font-weight: 500;

                            }
                            .redline {
                                width: 20px;
                                height: 3px;
                                border-radius: 2px;
                                background-color: #f06742;
                                position: absolute;
                                bottom: 0;
                                margin: 0 auto;
                                border: none;
                            }
                        }
                    }
                }
            }
            .rankwrap {
                .rankitem{
                    padding: 0 15px 0 27px;
                    display: flex;
                    align-items: center;
                    height: 46px;
                    width: 370px;
                    box-sizing: border-box;
                    
                    .itemleft {
                        width: 20px;
                        height: 45px;
                        line-height: 45px;
                        text-align: center;
                        font-size: 16px;
                        color: #dabda6;;
                    }
                    .itemright {
                        border-bottom: 1px solid #eee;
                        width: 100%;
                        height: 100%;
                        line-height: 45px;
                        padding-left: 10px;
                        box-sizing: border-box;
                        font-size: 16px;
                        color: #333;
                    }
                    &:first-of-type {
                        .itemleft {
                            font-size: 20px;
                            color: #ff0b0b;
                        }
                    }
                    &:nth-of-type(2){
                        .itemleft {
                            font-size: 20px;
                            color: #f86442;
                        }
                    }
                    &:nth-child(3){
                        .itemleft {
                            font-size: 20px;
                            color: #f8a642;
                        }
                    }
                }
                .icon-arrow-down1 {
                    color: #93cc48;
                }
                .icon-arrow-up {
                    color: #e44a3b;;
                }
                .icon-minus1 {
                    color: #dededf;
                }
            }
        }
        .activesearch {
            padding: 0 14px;

            .top {
                height: 40px;
                padding: 15px 0;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #e1e1e1;
                .searchimg {
                    width: 40px;
                    height: 40px;
                    border-radius: 4px;
                }
                .content {
                    width: 260px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    margin: 0 10px;
                    .title {
                        font-size: 14px;
                        color: #40404c;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;

                    }
                    .contentbottom {
                        margin-top: 5px;
                        display: flex;
                        align-items: center;
                        color: #a3a3ac;
                        font-size: 12px;
                        height: 14px;
                        .desc {
                            height: 13px;
                            line-height: 13px;
                            padding: 0 4px;
                            border: 1px solid #a3a3ac;
                            border-radius: 4px;
                        }
                        .play {
                            display: flex;
                            align-items: center;
                            margin: 0 14px;
                            .audio {
                                color: #a3a3ac;
                                margin-right: 3px;
                                font-size: 15px;
                            }
                        }
                        .num {
                            display: flex;
                            align-items: center;
                            .icon-sound-wave {
                                color: #a3a3ac;
                                margin-right: 2px;
                                font-size: 15px;
                            }
                        }
                    }
                }
                .icon-icon-video-play-fill {
                    color: #a3a3ac;
                    font-size: 26px;
                }
            }
            .bottom {
                .item {
                    height: 40px;
                    line-height: 40px;
                    border-bottom: 1px solid #e1e1e1;
                    color: #40404c;
                    font-size: 14px;
                }
            }
        }

    }


}
</style>